<template>
  <el-input
    class="scene-name"
    v-model="editorStore.sceneDetail.activityName"
    :maxlength="50"
    @click="toggleEditing"
  >
    <!-- :disabled="!editing" -->
    <!-- <template #suffix>
      <SvgIcon :icon-class="editing ? 'ic_确认' : 'ic_编辑'" />
    </template> -->
  </el-input>
</template>

<script lang="ts" setup>
import { useEditorStore } from '@/store/editor';

const editing = ref(false);
const editorStore = useEditorStore();

const toggleEditing = () => {
  editing.value = !editing.value;
};
</script>

<style lang="less" scoped>
.scene-name {
  width: auto !important;
  height: 36px;
  margin-right: 16px;
  :deep(.el-input__wrapper) {
    background: transparent;
    border-radius: 4px;
    box-shadow: none;
    padding: 0 10px;
    &.is-focus {
      background: #323232;
    }

    .el-input__inner {
      color: #fff;
    }
    .el-input__suffix {
      position: absolute;
      right: 14px;
      pointer-events: auto;
      cursor: pointer;
    }
    .svg-icon {
      margin-left: 0;
      margin-right: 0;
      font-size: 24px;
    }
  }
}
</style>
